<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page import="org.springframework.context.ApplicationContext" %>
<%@ page import="org.springframework.web.context.support.WebApplicationContextUtils" %>
<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<%
//String id=request.getParameter("id");
//    String pc="";
//    if(StringUtils.isNotBlank(id)){
//        ApplicationContext applicationContext= WebApplicationContextUtils.getWebApplicationContext(getServletConfig().getServletContext());
//        StoreDetailService storeDetailService=applicationContext.getBean("storeDetailService",StoreDetailService.class);
//        StoreDetail storeDetail = storeDetailService.findOne(id);
//        pc=storeDetail.getPc();
//        if(StringUtils.isEmpty(pc)){
//            pc="";
//        }
//
//    }
%>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <script type="text/javascript" charset="utf-8" src="third-party/jquery-1.10.2.min.js"></script>

    <script>
        var appPath='<c:url value="/"/>'
    </script>

    <style>
        ::-webkit-scrollbar {width: 5px;height: 5px;}
        ::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 16px #645654;/*rgba(60,60,60,0.5)*/}
        @keyframes spin {0% {transform: rotate(0)}100% {transform: rotate(360deg)}}
        @-moz-keyframes spin {0% {-moz-transform: rotate(0)}100% {-moz-transform: rotate(360deg)}}
        @-webkit-keyframes spin {0% {-webkit-transform: rotate(0)}100% {-webkit-transform: rotate(360deg)}}
        @-o-keyframes spin {0% {-o-transform: rotate(0)}100% {-o-transform: rotate(360deg)}}
        @-ms-keyframes spin {0% {-ms-transform: rotate(0)}100% {-ms-transform: rotate(360deg)}}
        .alpha-bg-w{z-index: 9999;}
    </style>
</head>
<body>
<div class="content-wrap">
    <div class="container container_index_width clearfix">


        <!-- 左边内容 -->
        <div class="content-l left">
            <!-- 菜单 -->
            <div class="tab-wrap">
                <dl class="active">
                    <dt>素材库</dt>
                    <dd class="active" type="scs_sc" mode="0">素材</dd>
                    <%--<dd type="scs_hy" mode="1">行业</dd>--%>
                    <%--<dd type="scs_jr" mode="1">节日</dd>--%>
                </dl>
                <%--<dl>--%>
                    <%--<dt>模板库</dt>--%>
                    <%--<dd type="mbc_hy" mode="1">行业</dd>--%>
                    <%--<dd type="mbc_jr" mode="1">节日</dd>--%>
                <%--</dl>--%>
            </div>

            <div class="content-l-box">
                <div class="tab-item">
                    <div id="tab_item">

                    </div>

                    <div class="con-box" id="choice">

                    </div>
                </div>

            </div>
        </div>
        <!-- 中间编辑器 -->
        <div class="content-mid left">
            <textarea id="container" name="content" class="content" edit="" required></textarea>
        </div>
        <script type="text/plain" id="upload_ue" style="display:none"></script>

        <!-- 右边浮动按钮 -->
        <ul class="content-r-nav">
            <div class="colors-box">
                <div class="colors-top clearfix">
                    <h2 class="right">调色盘 </h2>
                    <span class="left"><span id="pickerBtn"><input type="text" value="#60d295" id="picker" class="colorPicker"></span></span>
                </div>
                <div id="colorCheck" style="line-height: 24px;" class="clearfix">
                    <label class="color-checkbox"><span class="checked" id="sci" data-value="3"><i class="active"></i>选中换色</span></label>
                    <label class="color-checkbox"><span class="" id="eci" data-value="2"><i class=""></i>全文换色</span></label>
                    <label class="color-checkbox"><span class="" id="mci" data-value="1"><i></i>左侧素材换色</span></label>
                </div>
                <ul class="clearfix colors-list">
                    <li class="color-swatch" style="background-color: #ac1d10" color="#ac1d10"></li>
                    <li class="color-swatch" style="background-color: #d82821;" color="#d82821"></li>
                    <li class="color-swatch" style="background-color: #ef7060;" color="#ef7060"></li>
                    <li class="color-swatch" style="background-color: #fde2d8;" color="#fde2d8"></li>
                    <li class="color-swatch" style="background-color: #d32a63;" color="#d32a63"></li>
                    <li class="color-swatch" style="background-color: #eb6794;" color="#eb6794"></li>
                    <li class="color-swatch" style="background-color: #f5bdd1;" color="#f5bdd1"></li>
                    <li class="color-swatch" style="background-color: #ffebf0;" color="#ffebf0"></li>
                    <li class="color-swatch" style="background-color: #e2561b;" color="#e2561b"></li>
                    <li class="color-swatch" style="background-color: #ff8124;" color="#ff8124"></li>
                    <li class="color-swatch" style="background-color: #fcb42b;" color="#fcb42b"></li>
                    <li class="color-swatch" style="background-color: #feecaf;" color="#feecaf"></li>
                    <li class="color-swatch" style="background-color: #0c8918;" color="#0c8918"></li>
                    <li class="color-swatch" style="background-color: #80b135;" color="#80b135"></li>
                    <li class="color-swatch" style="background-color:#c2c92a;" color="#c2c92a"></li>
                    <li class="color-swatch" style="background-color:#e5f3d0;" color="#e5f3d0"></li>
                    <li class="color-swatch" style="background-color:#374aae;" color="#374aae"></li>
                    <li class="color-swatch" style="background-color:#1e9be8;" color="#1e9be8"></li>
                    <li class="color-swatch" style="background-color:#59c3f9;" color="#59c3f9"></li>
                    <li class="color-swatch" style="background-color:#b6e4fd;" color="#b6e4fd"></li>
                    <!-- 紫色 -->
                    <li class="color-swatch" style="background-color:#8d4bbb;" color="#8d4bbb"></li>
                    <li class="color-swatch" style="background-color:#a65bcb;" color="#a65bcb"></li>
                    <li class="color-swatch" style="background-color:#cca4e3;" color="#cca4e3"></li>
                    <li class="color-swatch" style="background-color:#be7763;" color="#be7763"></li>
                    <li class="color-swatch" style="background-color: #212122;" color="#212122"></li>
                    <li class="color-swatch" style="background-color: #757576;" color="#757576"></li>
                    <li class="color-swatch" style="background-color: #c6c6c7" color="#c6c6c7"></li>
                    <li class="color-swatch" style="background-color: #f5f5f4" color="#f5f5f4"></li>
                </ul>
            </div>
            <li class="wdl2">保存／更新</li>


            <li class="_look">预览</li>

            <li class="_empoty">清空</li>
            <li class="_close_win">关闭窗口</li>

            <%--<li class="kefu">客服二维码</li>--%>
            <%--<li class="kfewm"><img src="assets/index/img/kfewm.jpg"></li>--%>
        </ul>

           </div>
</div>

<!-- 预览 -->
<div class="phone-view" style="">
    <div class="phone-view-body">
        <section class="preview-phone" style="">
            <span id="phone-close"><i class="iconfont icon-guanbi"></i></span>
            <section class="preview-body">
                <section class="preview-content"></section>
            </section>
        </section>
    </div>
</div>

<!--背景-->
<div class="set_box" id="bg-wrap">
    <div class="set_box_top">
        <h2>背景设置</h2>
        <span class="set_close"></span>
    </div>
    <ul class="set_box_container" id="bg-container">
        <li>
            <span>背景图地址：</span>
            <div class="con">
                <input type="text" class="form J-bgChangeSrc" />
                <a href="javascript:void(0);" class="btn J-uploadTip">选择 / 上传</a>
            </div>
        </li>
        <li>
            <span>背景图重复：</span>
            <div class="con">
                <select class="form J-bgChangeRepeat">
                    <option value="repeat">重复</option>
                    <option value="no-repeat">不重复</option>
                    <option value="repeat-x">水平方向重复</option>
                    <option value="repeat-y">垂直方向重复</option></select>
            </div>
        </li>
        <li>
            <span>背景图定位：</span>
            <div class="con">
                <select class="form J-bgChangePosition">
                    <option value="0% 0%">左上角</option>
                    <option value="50% 0%">顶部居中</option>
                    <option value="100% 0%">右上角</option>
                    <option value="0% 50%">左边居中</option>
                    <option value="50% 50%">上下左右居中</option>
                    <option value="100% 50%">右居中</option>
                    <option value="0% 100%">左下角</option>
                    <option value="50% 100%">底部居中</option>
                    <option value="100% 100%">右下角</option></select>
            </div>
        </li>
        <li>
            <span>背景图尺寸：</span>
            <div class="con">
                <select class="form J-bgChangeSize">
                    <option value="auto">默认</option>
                    <option value="cover">等比缩放</option>
                    <option value="100% 100%">100 % 缩放</option>
                    <option value="contain">自适应</option>
                </select>
            </div>
        </li>
    </ul>
    <p class="set_box_btn">
        <a href="javascript:void(0);" class="btn btn-true set_close">确定</a>
        <a href="javascript:void(0);" class="btn btn-cancel set_close">取消</a>
    </p>
</div>

<!--段落-->
<div class="set_box" id="p-wrap">
    <div class="set_box_top">
        <h2>段落设置</h2>
        <span class="set_close"></span>
    </div>
    <ul class="set_box_container" id="p-container">
        <li>
            <span>字体：</span>
            <div class="con">
                <select class="form J-pFontFamily" data-role="font-family">
                    <option value="微软雅黑">微软雅黑</option>
                    <option value="宋体">宋体</option>
                    <option value="楷体">楷体</option>
                    <option value="黑体">黑体</option>
                    <option value="隶书,SimLi">隶书</option>
                    <option value="arial">arial</option>
                    <option value="sans-serif">sans-serif</option>
                </select>
            </div>
        </li>
        <li>
            <span>字号：</span>
            <div class="con">
                <input type="number" class="form J-pFontSize" data-role="font-size" data-conversion="px">px
            </div>
        </li>
        <li>
            <span>加粗：</span>
            <div class="con">
                <select class="form J-pFontWeight" data-role="font-weight">
                    <option value="normal">默认</option>
                    <option value="bold">加粗</option>
                    <option value="100">不加粗</option>
                </select>
            </div>
        </li>
        <li>
            <span>颜色：</span>
            <div class="con">
                <input type="text" class="form J-pColor" data-role="color">
            </div>
        </li>
        <li>
            <span>字间距：</span>
            <div class="con">
                <input type="number" class="form J-pLetterSpacing" data-role="letter-spacing" data-conversion="px">px
            </div>
        </li>
        <li>
            <span>行高：</span>
            <div class="con">
                <input type="number" class="form J-pLineHeight" data-role="line-height" data-conversion="em">em
            </div>
        </li>
        <li>
            <span>首行缩进：</span>
            <div class="con">
                <input type="number" class="form J-pTextIndent" data-role="text-indent" data-conversion="em">em
            </div>
        </li>
        <li>
            <span>段前距：</span>
            <div class="con">
                <input type="number" class="form J-pPaddingTop" data-role="padding-top" data-conversion="px">px
            </div>
        </li>
        <li>
            <span>背景色：</span>
            <div class="con">
                <input type="text" class="form J-pBgColor" data-role="background-color">
            </div>
        </li>
        <li>
            <span>段后距：</span>
            <div class="con">
                <input type="number" class="form J-pPaddingBottom" data-role="padding-bottom" data-conversion="px">px
            </div>
        </li>
    </ul>
    <p class="set_box_btn">
        <a href="javascript:void(0);" class="btn btn-true set_close">确定</a>
        <a href="javascript:void(0);" class="btn btn-cancel set_close">取消</a>
    </p>
</div>
<!--美图-->
<div class="meitubox" id="showXiuxiu_box"><div id="showXiuxiu"></div></div>
<div class="meitubox" id="showMosaic_box"><div id="showMosaic"></div></div>
<!--结束-->

<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="third-party/zeroclipboard/ZeroClipboard.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="bgeditor.js"> </script>
<script type="text/javascript" charset="utf-8" src="less/less.js"> </script>
<script type="text/javascript" charset="utf-8" src="less/editor.js"> </script>
<script type="text/javascript" charset="utf-8" src="color.js"> </script>
<script type="text/javascript" charset="utf-8" src="color_exchange.js"> </script>
<script type="text/javascript" charset="utf-8" src="layer/layer.js"> </script>
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" charset="utf-8" src="main.js"></script>

<script type="text/javascript">
    $(function () {
        editor.addListener('ready', function() {
            editor.setContent('', true);
        });
        <%--function showSaveWin() {--%>
            <%--parent.Ext.widget('StoreObjSelector',{--%>
                <%--mode:'SINGLE',--%>
                <%--modal:true,--%>
                <%--resultBack:function (recs) {--%>
                    <%--var data={--%>
                        <%--storeId:recs[0].get('id'),--%>
                        <%--id:'${param.id}'--%>
                    <%--}--%>
                    <%--saveContent(data);--%>
                <%--}--%>
            <%--}).show();--%>
        <%--}--%>
//        function saveContent(data) {
//            var content=editor.getContent();
//            var mo_tem=$('<p></p>').append(content);
//            data.pc=filter(mo_tem);
//            parent.Ext.Ajax.request({
//                url: appPath+'detail/save',
//                method: 'POST',
//                jsonData:data,
//                success: function (response, options) {
//                    var result;
//                    try{
//                        result = parent.Ext.decode(response.responseText,true);
//                    }catch (e){
//                        return
//                    }
//                    if(result.success){
//                        detail_frame_win.close();
//                        StoreDetailView.down('grid').getStore().load();
//                    }else{
//                        parent.Ext.example.msg('提示',result.message);
//                    }
//                }
//            });
//        }

//        var detail_frame_win=parent.Ext.ComponentQuery.query('#detail_frame_win')[0];
//        var StoreDetailView=parent.Ext.ComponentQuery.query('StoreDetailView')[0];
        $('.wdl2').click(function () {
            if (editor.getContentTxt().length == 0 && editor.getContent() == '') {
                layer.msg('当前没有内容可保存');
                return;
            }
            <c:if test="${param.id.length()>0}">
                layer.confirm('当前页面关联的藏品未：${param.storeName},是否更换藏品？', {
                    btn: ['更换','不更换直接保存'] //按钮
                }, function(){
                    showSaveWin();
                }, function(){
                    var data={
                        storeId:'${param.storeId}',
                        id:'${param.id}'
                    }
                    saveContent(data);
                });
            </c:if>
            <c:if test="${param.id==null || param.id.length()==0}">
                showSaveWin();
            </c:if>
        });
        $('._close_win').click(function () {
            detail_frame_win.close();
        })
    });
    function filter($obj) {
        $obj.find('img').removeAttr('width').removeAttr('height').css('width','100%');
        $obj.find('video').removeAttr('width').removeAttr('height').css('width','100%');
    //    $obj.find('table').removeAttr('width').css('width','');
    //    $obj.find('td').removeAttr('width').css('width','');
    //    $obj.find('th').removeAttr('width').css('width','');
    //    $obj.find('tr').removeAttr('width').css('width','');
        $obj.find('iframe').removeAttr('width').removeAttr('height').css('width','100%');
        return $obj.html();
    }
</script>

</body>
</html>